<template>
  <div class="seckill-order-management">
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="订单ID" width="80" />
      <el-table-column prop="productId" label="商品ID" width="80" />
      <el-table-column prop="userId" label="用户ID" width="80" />
      <el-table-column prop="name" label="商品名称" width="150" />
      <el-table-column prop="price" label="秒杀价格" width="100">
        <template #default="{ row }">
          ¥{{ row.price }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="180" />
      <el-table-column prop="createdTime" label="创建时间" width="180" />
      <el-table-column prop="updatedTime" label="更新时间" width="180" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button 
            v-if="row.status === 0"
            type="danger" 
            link 
            @click="handleCancel(row)"
          >
            取消订单
          </el-button>
          <el-button 
            v-if="row.status === 1"
            type="primary" 
            link 
            @click="handleDeliver(row)"
          >
            发货
          </el-button>
          <el-button 
            v-if="row.status === 6"
            type="warning" 
            link 
            @click="handleRefund(row)"
          >
            退款
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  getSeckillOrderList, 
  deliverSeckillOrder, 
  refundSeckillOrder,
  cancelSeckillOrder 
} from '@/api/seckillOrder'

// 表格数据
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'warning', // 待支付
    1: 'success', // 已支付
    2: 'info',    // 已取消
    3: 'primary', // 已发货
    4: 'success', // 已完成
    5: 'danger',  // 退款
    6: 'warning'  // 退款中
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已取消',
    3: '已发货',
    4: '已完成',
    5: '退款',
    6: '退款中'
  }
  return statusMap[status] || '未知状态'
}

// 获取订单列表
const getList = async () => {
  loading.value = true
  try {
    const res = await getSeckillOrderList({
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })
    if (res.code === 1 && res.data) {
      tableData.value = res.data.records
      total.value = res.data.total
    }
  } catch (error) {
    console.error('获取秒杀订单列表失败:', error)
    ElMessage.error('获取秒杀订单列表失败')
  } finally {
    loading.value = false
  }
}

// 发货
const handleDeliver = (row) => {
  ElMessageBox.confirm('确认发货该订单吗？', '提示', {
    type: 'warning'
  })
    .then(async () => {
      try {
        await deliverSeckillOrder(row.id)
        ElMessage.success('发货成功')
        getList()
      } catch (error) {
        console.error('发货失败:', error)
        ElMessage.error('发货失败')
      }
    })
    .catch(() => {})
}

// 退款
const handleRefund = (row) => {
  ElMessageBox.confirm('确认退款该订单吗？', '提示', {
    type: 'warning'
  })
    .then(async () => {
      try {
        await refundSeckillOrder(row.id)
        ElMessage.success('退款成功')
        getList()
      } catch (error) {
        console.error('退款失败:', error)
        ElMessage.error('退款失败')
      }
    })
    .catch(() => {})
}

// 取消订单
const handleCancel = (row) => {
  ElMessageBox.confirm('确认取消该订单吗？', '提示', {
    type: 'warning'
  })
    .then(async () => {
      try {
        await cancelSeckillOrder(row.id)
        ElMessage.success('取消订单成功')
        getList()
      } catch (error) {
        console.error('取消订单失败:', error)
        ElMessage.error('取消订单失败')
      }
    })
    .catch(() => {})
}

// 分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  getList()
}

// 页码改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  getList()
}

// 初始化
onMounted(() => {
  getList()
})
</script>

<style scoped>
.seckill-order-management {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 